<!DOCTYPE html>
<html>
    <head>
        <!-- Title here -->
        <title>:: PENNY ::</title>
        <!-- Description, Keywords and Author -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="Your description">
        <meta name="keywords" content="Your,Keywords">
        <meta name="author" content="ResponsiveWebInc">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,600' rel='stylesheet' type='text/css'>	 
        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>


        <!-- Styles -->
        <!-- Bootstrap CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/font-awesome.min.css" rel="stylesheet">	
        <link href="css/style.css" rel="stylesheet" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <!-- Favicon -->
        <link rel="shortcut icon" href="#">
    </head>

    <body>

        <div class="outer">

            <!-- Sidebar Start-->
            <!-- Menu for tablets and mobile -->
            <div class="navigation">
                <a href="#">Menu</a>
            </div>
            <div class="sidebar">
                <!-- Logo of company -->
                <div class="logo text-center">
                    <h1><a href="#">PENNY</a></h1>
                    <p>Subtitle Section</p>
                </div>


                <!--chỗ này tập trung các phần pupop-->
                <?php
                include './php/view/content_pupop.php';
                ?>                
                <!--end pupop-->


                <!-- Navigation menu list -->
                <ul class="list-unstyled list" role="menu" aria-labelledby="dropdownMenu" >
                    <!--<li><a href="#home" class="anchorLink"><i class="icon-home scolor"></i></a></li>-->
                    <li><a href="#.team" class="anchorLink"><i class="icon-user scolor"></i> About Us</a></li>
                    <li class="dropdown-submenu" role="menu" aria-labelledby="dropdownMenu" >
                        <a href="#.service" class="anchorLink"><i class="icon-retweet scolor"></i> Our Products</a>
                        <ul class="dropdown-menu" >
                            <li><a tabindex="-1" href="#">tung</a></li>
                            <li><a href="#">Second level</a></li>
                            <li><a href="#">Second level</a></li>
                        </ul>
                    </li>
                    <li><a href="#.feature" class="anchorLink"><i class="icon-road scolor"></i> Promotion</a></li>
                    <li><a href="#.testimonial" class="anchorLink "><i class="icon-info scolor"></i> Where To Buy</a></li>
                    <li><a href="#" class="anchorLink "  data-toggle="modal" data-target="#basicModal"><i class="icon-gift scolor"></i> Member</a></li>
                    <li><a href="#.contact" class="anchorLink"><i class="icon-envelope scolor"></i> Contact Us</a></li>

                </ul>
                <!-- Social media links -->
            </div>

            <!-- Sidebar End -->

            <!-- Main Start -->

            <div class="main">

                <div id="carousel-example-generic" class="carousel slide carousel-fade">

                    <!-- Wrapper for slides -->

                    <div class="carousel-inner">
                        <!-- Carousel item start -->
                        <?php
                        include './php/view/slideshow.php';
                        ?>
                    </div>

                    <!-- Controls -->

                    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="icon-prev"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="icon-next"></span>
                    </a>
                </div>

                <!-- Wrapper for slides End -->



                <div class="container">

                    <!-- Start Hero -->

                    <div class="hero">
                        <div class="row">
                            <div class="col-md-12">
                                <h2>It's Lorem ipsum dolor sit amet consectetur</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur adipiscing elit tristique est consectetur adipiscing elit tristique sit amet diam interdum semper. Accumsan id.</p>

                            </div>
                        </div>
                    </div>
                    <hr />
                    <!-- Hero End -->

                    <!-- Start team profile -->
                    <div class="team">
                        <h3>About Us</h3>
                        <div class="bor hidden-xs"></div>
                        <div class="row">
                            <?php
                            include './php/view/about_us.php';
                            ?>
                        </div>	
                    </div>
                    <hr />

                    <!-- Team profile End --> 


                    <!--đây là phần sản phẩm-->
                    <!-- Services start -->
                    <?php
                    include './php/view/products.php';
                    ?>
                    <hr />
                    <!-- Services End -->

                    <!-- Features Start -->

                    <div class="feature">
                        <h3>Feature</h3>
                        <div class="bor hidden-xs"></div>
                        <div class="row">
                            <div class="col-md-3 col-xs-6">
                                <!-- Feature item -->
                                <div class="feature-item animated">
                                    <i class="icon-gears"></i>
                                    <!-- Feature item heading and description -->
                                    <h4>Similique Sunt Sin</h4>
                                    <p>Circumstances occur in which toil him some great pleasure.</p>
                                </div>
                            </div>
                            <div class="col-md-3 col-xs-6">
                                <div class="feature-item animated">
                                    <i class="icon-refresh"></i>
                                    <h4>Harum Et Quidem</h4>
                                    <p>Et harum quidem rerum facilis est et expedita distinctio.</p>
                                </div>
                            </div>
                            <div class="col-md-3 col-xs-6">
                                <div class="feature-item animated">
                                    <i class="icon-unlink"></i>
                                    <h4>Voluptatum Deleniti Atque </h4>
                                    <p>Voluptates repudiandae sint et iae non recusandae.</p>
                                </div>
                            </div>
                            <div class="col-md-3 col-xs-6">
                                <div class="feature-item animated">
                                    <i class="icon-puzzle-piece"></i>
                                    <h4>Blinded By Desire</h4>
                                    <p>Cases are perfectly simple and easy to distinguish.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />

                    <!-- Features End -->

                    <!-- Testimonials Start -->

                    <div class="testimonial">
                        <h3>Testimonial</h3>
                        <div class="bor hidden-xs"></div>
                        <div class="row">
                            <div class="col-md-4">
                                <!-- testimonial content -->
                                <div class="testimonial-content animated">
                                    <!-- User's image , name and designation -->
                                    <h4><img src="img/user-xs.jpg" alt="" class="img-responsive img-circle"/>H. Rackham<span>, Atr Director</span></h4>
                                    <!-- User's comment -->.
                                    <blockquote>
                                        <p>Sed ut perspiciatis unde omnis iste natust error sit vol accusantium doloremque and laudantium, totam rem aperiam, eaque an ipsa quae abe illo explicabo. An oiuk nesciunt.</p>
                                    </blockquote>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="testimonial-content animated">
                                    <h4><img src="img/user-xs.jpg" alt="" class="img-responsive img-circle"/>J. Cicero<span>, C.E.O.</span></h4>
                                    <blockquote>
                                        <p>On the other hand, we denounce with righteous indignation dislike men who are so beguiled and demoralized by the charms of pleasu of the moment, that are bound to ensue.</p>
                                    </blockquote>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="testimonial-content animated">
                                    <h4><img src="img/user-xs.jpg" alt="" class="img-responsive img-circle"/>Nam Libero<span>, Manager</span></h4>
                                    <blockquote>
                                        <p>Welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of  that have to be the moment and annoyances accepted.</p>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />

                    <!-- Testimonials End -->

                    <!-- Price Table Start -->

                    <div class="ptable">
                        <h3>Pricing Table</h3>
                        <div class="bor hidden-xs"></div>
                        <div class="row">
                            <div class="col-md-3">
                                <!-- Pricing table list -->
                                <div class="ptable-content">
                                    <!-- Heading of item -->
                                    <h4>STARTER</h4>
                                    <p>Some thighs goes here</p>
                                    <!-- Item cost -->
                                    <span class="pcost">$10.50/m</span>
                                    <!-- Item features list -->
                                    <ul class="list">
                                        <li>1GB Storage</li>
                                        <li>100GB Bandwidth</li>
                                        <li>24/7 Support</li>
                                    </ul>
                                    <!-- Buy now button -->
                                    <a href="#" class="btn btn-info">Buy It Now</a>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <!-- 'phighlight' help to highlight the price of the item  -->
                                <div class="phighlight ptable-content">
                                    <h4>BUSINESS</h4>
                                    <p>Some thighs goes here</p>
                                    <span class="pcost">$30.50/m</span>
                                    <ul class="list">
                                        <li>1GB Storage</li>
                                        <li>100GB Bandwidth</li>
                                        <li>24/7 Support</li>
                                    </ul>
                                    <a href="#" class="btn btn-info">Buy It Now</a>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="ptable-content">
                                    <h4>ENTERPRISE</h4>
                                    <p>Some thighs goes here</p>
                                    <span class="pcost">$50.50/m</span>
                                    <ul class="list">
                                        <li>1GB Storage</li>
                                        <li>100GB Bandwidth</li>
                                        <li>24/7 Support</li>
                                    </ul>
                                    <a href="#" class="btn btn-info">Buy It Now</a>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="ptable-content">
                                    <h4>MNC</h4>
                                    <p>Some thighs goes here</p>
                                    <span class="pcost">$150.50/m</span>
                                    <ul class="list">
                                        <li>1GB Storage</li>
                                        <li>100GB Bandwidth</li>
                                        <li>24/7 Support</li>
                                    </ul>
                                    <a href="#" class="btn btn-info">Buy It Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <!-- Price Table End -->

                    <!-- Contact Start -->

                    <div class="contact">
                        <h3>Contact</h3>
                        <div class="bor hidden-xs"></div>
                        <div class="contact-details">
                            <!-- Contact form  -->
                            <h4>Contact Us</h4>
                            <form role="form" class="form">
                                <div class="form-group">
                                    <!-- Name input box -->
                                    <label for="exampleInputEmail1">Name</label>
                                    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Name">
                                </div>
                                <div class="form-group">
                                    <!-- Email input box -->
                                    <label for="exampleInputPassword1">Email</label>
                                    <input type="email" class="form-control" id="exampleInputPassword1" placeholder="Enter Email">
                                </div>
                                <div class="form-group">
                                    <!-- Message input box -->
                                    <label>Text Area</label>
                                    <textarea class="form-control" rows="3"></textarea>
                                </div>

                                <!-- Submit and reset button -->
                                <button type="submit" class="btn btn-default">Send</button>
                                <button type="reset" class="btn btn-default">Reset</button>
                            </form>
                            <!-- Address -->
                            <h5>Address</h5>
                            <p><span>Responsive Web, Inc.</span><br />
                                795 Folsom Ave, Suite 600<br />
                                San Francisco, CA 94107<br />
                                P: (123) 456-7890.</p>
                            <div class="c-social">
                                <a href=""><i class="icon-facebook"></i></a>
                                <a href=""><i class="icon-google-plus"></i></a>
                                <a href=""><i class="icon-twitter"></i></a>
                                <a href=""><i class="icon-linkedin"></i></a>
                            </div>
                        </div>
                        <!-- Google map to help locate the address -->
                        <div class="google-map">
                            <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/?ie=UTF8&amp;ll=12.953997,77.63094&amp;spn=0.815042,1.352692&amp;t=m&amp;z=10&amp;output=embed"></iframe>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <!-- Contact End -->

                    <!-- Footer -->
                    <footer>
                        <div class="row">
                            <div class="col-md-12">
                                <hr />
                                <br />
                                <!-- You should not remove the footer link back. -->
                                <p class="text-center">Copyright 2013 - <a href="#">Your Website</a> - Designed by <a href="http://responsivewebinc.com/bootstrap-themes">Bootstrap Themes</a></p>
                                <br />
                            </div>
                        </div>
                    </footer>

                </div>



            </div>	<!-- This end div for main class -->
        </div>

        <div class="clearfix"></div>


        <!-- Scroll to top -->
        <span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span> 


        <!-- Javascript files -->
        <!-- jQuery -->
        <script src="js/jquery.js"></script>
        <!-- Bootstrap JS -->
        <script src="js/bootstrap.min.js"></script>
        <!-- jquery Anchor JS -->
        <script src="js/jquery.arbitrary-anchor.js"></script>
        <!-- jQuery way points -->
        <script src="js/waypoints.min.js"></script>
        <!-- Respond JS for IE8 -->
        <script src="js/respond.min.js"></script>
        <!-- HTML5 Support for IE -->
        <script src="js/html5shiv.js"></script>
        <!-- Custom JS -->
        <script src="js/custom.js"></script>
    </body>	
</html>